<template>
    <div class="sequence">
        <div class="commonSearch">
            <div class="commonContent" style="height: 40px;">
                <el-form :model="searchForm" label-width="80px" size="mini" style="flex:22">
                    <el-form-item label="设备分组">
                        <tree-select @getId="getId" :clearable='false'></tree-select>
                    </el-form-item>
                    <el-form-item label="期间">
                        <el-date-picker v-model="daterange" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期"  @change="handleDateRange">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="设备">
                        <el-select v-model="searchForm.deviceId" filterable placeholder="请选择">
                            <el-option v-for="item in deviceSnList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <my-button type="primary" icon="el-icon-search" size="mini"
                    style="flex-shirk:0;height:28px;width:73px;margin-left:20px" v-throttle:200='searchList'>查询
                </my-button>
            </div>
        </div>

        <div class="chart">
            <echartCommon ref="sequence" id-name="sequence"></echartCommon>
        </div>

        <tableHoursList ref='tableHours' :searchForm='searchForm' style="margin-top:20px" @getChart='getChart'></tableHoursList>

        <tableTypeList ref='tableType' :searchForm='searchForm' style="margin-top:20px"></tableTypeList>
    </div>
</template>

<script>
    import {
        sequenceOption
    } from "./echartOptions.js";
    import {
        deviceDropDown
    } from '@/api/lampController'
    import echartCommon from "./echartCommon.vue";
    import * as echarts from 'echarts/core';
    import tableHoursList from './tableHoursList.vue'
    import tableTypeList from './tableTypeList.vue'
    export default {
        data() {
            return {
                searchForm: {
                    groupId: '',
                    deviceId:'',
                    startTime:'',
                    endTime:'',
                    page: 1,
                    limit: 10
                },
                daterange: [new Date(),new Date()],
                deviceSnList:[],
                start: 'yyyy-MM-dd 00:00:00',
                end: 'yyyy-MM-dd 23:59:59'
            }
        },
        components: {
            tableHoursList,
            tableTypeList,
            echartCommon,
        },
        mounted() {
            const start = new Date().dateFormat(this.start)
            const end = new Date().dateFormat(this.end)
            this.searchForm.startTime = start
            this.searchForm.endTime = end
        },
        methods: {
            //分组id
            getId(groupId) {
                this.searchForm.groupId = groupId
                this.getDeviceDropDown({groupId})
            },
            searchList() {
                this.$refs.tableType.getLampRequestList(this.searchForm)
                this.$refs.tableHours.getLampTiming(this.searchForm)
            },
            //设备下拉
            getDeviceDropDown: async function (data) {
                const res = await deviceDropDown(data)
                if (res.code == 200) {
                    this.searchForm.deviceId = ''
                    if(res.data.length){
                        const index = 0
                        this.searchForm.deviceId = res.data[index].value
                    }
                    this.deviceSnList = res.data
                    this.$refs.tableType.getLampRequestList(this.searchForm)
                    this.$refs.tableHours.getLampTiming(this.searchForm)
                }
            },
            getChart(chartData,statisticsList){
                this.$refs.sequence.show(sequenceOption(echarts,chartData,statisticsList))
            },
            handleDateRange(val){
                this.searchForm.startTime = val === null ? '' : val[0].dateFormat(this.start)
                this.searchForm.endTime = val === null ? '' : val[1].dateFormat(this.end)
            },
        }
    }
</script>

<style lang="less" scoped>
    .sequence {
        .commonSearch {
            position: relative;

            .commonContent {
                .el-form-item--mini.el-form-item {
                    width: 33%;

                    .el-select {
                        width: 100%;
                    }
                }

                /deep/ .el-range-editor.el-input__inner {
                    width: 95%;
                }

                /deep/ .el-range-editor .el-range-input {
                    flex: 3;
                }

                /deep/ .el-date-editor .el-range-separator {
                    flex: 1;
                }
            }
        }
    }
</style>